let isLoading = false; // 标志，防止重复加载
let msnry; // Masonry 实例


const flashBtn = document.querySelector('.flash_btn');
const flashText = document.getElementById('flash_text');
const upBtn = document.querySelector('.up_btn');
const upText = document.getElementById('up_text');


function showElement(element) {
    element.style.display = 'flex';
}

function hideElement(element) {
    element.style.display = 'none';
}


flashBtn.addEventListener('mouseover', function () {
    showElement(flashText); // 显示 flash_text
});
flashBtn.addEventListener('mouseout', function () {
    hideElement(flashText); // 隐藏 flash_text
});

upBtn.addEventListener('mouseover', function () {
    showElement(upText); // 显示 up_text
});
upBtn.addEventListener('mouseout', function () {
    hideElement(upText); // 隐藏 up_text
});

upBtn.addEventListener('click', function () {
    // 平滑滚动回到页面顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 使用平滑滚动效果
    });
});

function toggleUpButton() {
    // 如果页面滚动距离大于 100 像素，则显示按钮，否则隐藏按钮
    if (window.scrollY > 100) {
        upBtn.style.display = 'flex';
    } else {
        upBtn.style.display = 'none';
    }
}


function loadRandomNotes(msnry) {
    $.ajax({
        url: '/api/explore.php?type=' + apiType,
        method: 'POST',
        dataType: 'json',
        data: {
            uid: uid,
            ...(typeof meuid !== 'undefined' && meuid !== null ? { meuid: meuid } : {}),
            page: page,
            keyword: keyword,
            note_type: note_type,
        },
        success: function(data) {
            const container = document.getElementById('notesContainer');
            if (!data) return;

            // 存储所有图片元素和加载状态
            const imageElements = [];
            let loadedCount = 0;

            // 定义异步加载图片的函数
            function loadImage(imgElement, src) {
                const img = new Image();
                img.onload = () => {
                    imgElement.src = src; // 替换为真实图片
                    loadedCount++; // 计数已加载图片
                    if (msnry) msnry.layout(); // 每次加载时更新布局
                    // 检查是否所有图片加载完成
                    if (loadedCount === imageElements.length) {
                        if (msnry) msnry.layout(); // 所有图片加载完成后再次更新布局
                        //console.log("All images loaded, final layout updated");
                    }
                };
                img.onerror = () => {
                    console.error(`Failed to load image: ${src}`);
                    loadedCount++; // 出错也计数，避免卡住
                    if (loadedCount === imageElements.length) {
                        if (msnry) msnry.layout(); // 最终更新
                    }
                };
                img.src = src;
            }


            // 一次性渲染所有笔记
            data.forEach((note, index) => {
                const noteDiv = document.createElement('div');
                noteDiv.className = 'col-3 watercol';
                noteDiv.style.opacity = '0';

                const isVideo = note.type === '1';
                const user_avatar = note.user.avatar || '/data/avatar/default.jpg';
                const likeIconSrc = note.islike ? '/static/img/exp-like-success.svg' : '/static/img/like.svg';

                // 使用默认图片作为初始 src，真实图片地址放在 data-src 中
                noteDiv.innerHTML = `
                    <div class="row" onclick="window.open('explore.php?id=${note.note_id}', '_blank')">
                        <div class="col">
                            <img src="/static/img/loading.gif" data-src="${note.image ? note.image : '/static/img/default.jpg'}" class="note_thumb">
                            <img src="/static/img/playvideo.svg" class="note_playsvg" style="${isVideo ? 'display: block;' : 'display: none;'}">
                        </div>
                    </div>
                    <div class="row" onclick="window.location.href='explore.php?id=${note.note_id}'">
                        <div class="col note_title">${note.title}</div>
                    </div>
                    <div class="row">
                        <div class="col user_name" onclick="window.location.href='/profile.php?id=${note.user.user_id}'">
                            <img src="/static/img/default.jpg" data-src="${user_avatar}" class="user_avatar"> ${note.user.nickname}
                        </div>
                        <div class="col text-end likeicon" data-note-id="${note.note_id}">
                            <span class="note_like_span" onclick="likenote('${note.note_id}',0)">
                                <img src="${likeIconSrc}"> <span class="note_likenum">${note.statistics.likes_count}</span>
                            </span>
                        </div>
                    </div>
                `;

                container.appendChild(noteDiv);

                // 延迟淡入效果
                setTimeout(() => {
                    noteDiv.style.transition = 'opacity 0.5s';
                    noteDiv.style.opacity = '1';
                }, index * 50);

                requestAnimationFrame(() => {
                    noteDiv.classList.add('loaded');
                });

                // 异步加载真实图片
                const noteThumb = noteDiv.querySelector('.note_thumb');
                const userAvatar = noteDiv.querySelector('.user_avatar');



                if (noteThumb.dataset.src) {
                    loadImage(noteThumb, noteThumb.dataset.src);
                    imageElements.push(noteThumb);
                }
                if (userAvatar.dataset.src) {
                    loadImage(userAvatar, userAvatar.dataset.src);
                    imageElements.push(userAvatar);
                }
            });

            // 所有笔记渲染完成后调整布局
            imagesLoaded(container, function() {
                if (msnry) {
                    msnry.layout();
                } else {
                    msnry = new Masonry(container, {
                        itemSelector: '.watercol',
                        columnWidth: '.watercol',
                        transitionDuration: '0s'
                    });
                }
            });

            /*
            // 使用 setInterval 每 0.1 秒检查一次布局
            let allLoaded = false;
            const checkInterval = setInterval(() => {
                // 检查所有图片是否加载完成
                allLoaded = imageElements.every(img => img.complete && img.naturalHeight !== 0);

                if (allLoaded) {
                    if (msnry) msnry.layout(); // 所有图片加载完成后再次更新布局
                    clearInterval(checkInterval); // 停止检查
                    console.log("All images loaded, final layout updated");
                } else {
                    if (msnry) msnry.layout(); // 未加载完成时更新布局
                    console.log("Updating Masonry Interval");
                }
            }, 100); // 每 0.1 秒检查一次

            */

            // 更新网格布局和样式
            updateGrid();
            applyStyles();

            // 设置图片容器样式
            const noteThumbs = document.querySelectorAll('.note_thumb');
            noteThumbs.forEach(function(noteThumb) {
                const container = noteThumb.parentElement;
                container.style.position = 'relative';
            });

            isLoading = false;
        },
        error: function(xhr, status, error) {
            console.log('null');
        }
    });
}

$(document).on('mouseenter', '.note_thumb', function() {
    const $noteThumb = $(this);
    const $container = $noteThumb.parent();
    let $overlay = $container.find('.overlay');

    // 如果没有找到遮罩层，创建一个
    if ($overlay.length === 0) {
        $overlay = $('<div class="overlay"></div>');
        $container.append($overlay);
    }

    updateOverlaySize($noteThumb[0], $overlay[0]);

    // 使用淡入效果显示遮罩层
    $overlay.stop(true, true).fadeIn(150);
});

$(document).on('mouseleave', '.note_thumb', function() {
    const $noteThumb = $(this);
    const $container = $noteThumb.parent();
    const $overlay = $container.find('.overlay');

    $overlay.stop(true, true).fadeOut(170);
});



// 更新网格布局函数
function updateGrid() {
    const gridItems = document.querySelectorAll('.watercol');
    if (window.innerWidth > 1500) {
        gridItems.forEach(item => {
            item.classList.remove('col-3');
            item.classList.add('col-5-custom');
        });
    } else {
        gridItems.forEach(item => {
            item.classList.remove('col-5-custom');
            item.classList.add('col-3');
        });
    }
}
function likenote(nid,type){
    if (!uid){
        Qmsg.info("登录后才能点赞！",{
            position:'center'
        });
        setTimeout(function() {
            window.location.href = 'login.php';
        }, 1000);
        return;
    }
    $.ajax({
        url: '/api/action.php?type=like', // 替换为实际 API 地址
        type: 'POST',
        data: {
            uid: uid,
            nid: nid,
            type: type
        },
        dataType: 'json',
        success: function(response) {
            if (response.status === '200') {
                // 点赞成功，更新图标
                const likeIcon = $(`.likeicon[data-note-id="${nid}"] img`);
                likeIcon.attr('src', '/static/img/exp-like-success.svg');

                // 更新点赞计数
                const likeCountElement = $(`.likeicon[data-note-id="${nid}"] .note_likenum`);
                updateLikeCount(likeCountElement, 1); // 点赞时增加1

                Qmsg.config({
                    timeout:700
                })
                Qmsg.success(response.message);
            } else {
                // 更新图标
                const likeIcon = $(`.likeicon[data-note-id="${nid}"] img`);
                likeIcon.attr('src', '/static/img/like.svg');
                // 更新点赞计数
                const likeCountElement = $(`.likeicon[data-note-id="${nid}"] .note_likenum`);
                updateLikeCount(likeCountElement, -1); // 取消点赞时减少1

                Qmsg.info(response.message);
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX请求出错:', status, error);
        }
    });
}

function updateLikeCount(likeCountElement, increment) {
    // 获取当前的点赞数
    let likesCountText = likeCountElement.text().trim();
    let likesCount = 0;

    // 检查当前文本是否为“万”格式并进行转换
    if (likesCountText.includes('万')) {
        likesCount = parseFloat(likesCountText) * 10000; // 转换为数字
    } else {
        likesCount = parseInt(likesCountText);
    }
    // 如果点赞数大于等于10000，则不进行更新
    if (likesCount >= 10000) {
        return; // 直接返回，不更新
    }
    // 根据 increment 参数更新点赞数
    likesCount += increment;

    // 更新显示的点赞数
    likeCountElement.text(likesCount);
}

function applyStyles($context) {
    // 如果没有传入上下文，则默认选择整个文档中的 .note_likenum 元素
    $context = $context || $(document);

    $context.find('.note_likenum').each(function () {
        var $this = $(this);

        // 判断是否已经转换过，如果已经有 data-converted 属性则跳过
        if ($this.attr('data-converted') === 'true') {
            return;
        }

        var likesCount = parseInt($this.text().trim()); // 获取 likes_count 的数值并转换为整数

        // 检查 likesCount 是否为有效数字
        if (isNaN(likesCount)) return;

        // 如果 likesCount 大于等于 10000，则转换为万单位显示
        if (likesCount >= 10000) {
            likesCount = (likesCount / 10000).toFixed(1) + '万'; // 保留一位小数
        }

        // 更新 HTML 显示内容为转换后的 likesCount
        $this.html(likesCount);

        // 标记为已转换
        $this.attr('data-converted', 'true');
    });
}



// 更新遮罩层大小函数
function updateOverlaySize(noteThumb, overlay) {
    const thumbWidth = noteThumb.offsetWidth;
    const thumbHeight = noteThumb.offsetHeight;
    overlay.style.width = thumbWidth + 0.5 + 'px';
    overlay.style.height = thumbHeight + 'px';
}

// 初始化时调用
updateGrid();

// 当窗口大小变化时，调用 updateGrid
window.addEventListener('resize', updateGrid);
// 滚动事件监听
let throttleTimeout = null;     //节流
var needsubpx = 325;
if (window.location.pathname.includes('profile.php')) {
    needsubpx = 200;
}
window.addEventListener('scroll', async () => {
    if (throttleTimeout) return;

    throttleTimeout = setTimeout(async () => {
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - needsubpx && !isLoading) {
            isLoading = true;
            page = page + 1;
            await loadRandomNotes(); // 使用 await 等待异步操作完成
            //isLoading = false;
        }
        toggleUpButton();
        throttleTimeout = null;
    }, 180);
});


